<script setup>
import { useCartStore } from "@/stores/cart";
import { ref } from "vue";
const cartStore = useCartStore();
console.log(cartStore.cartList);
//单选回调
const handleChange = (item, selected) => {
  cartStore.singleChange(item.skuId, selected);
};
//全选回调
const changeAll = (selected) => {
  cartStore.allChange(selected);
};
</script>

<template>
  <div class="container">
    <div class="cart">
      <table ref="products">
        <thead>
          <tr>
            <th width="120px">
              <el-checkbox :model-value="cartStore.allSelected" @change="changeAll"></el-checkbox>
            </th>
            <th width="400px">商品信息</th>
            <th width="220px">商品单价</th>
            <th width="180px">数量</th>
            <th width="180px">小计</th>
            <th width="140px">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in cartStore.cartList" :key="item.skuId">
            <td width="120px">
              <el-checkbox
                :model-value="item.selected"
                @change="(selected) => handleChange(item, selected)"
              ></el-checkbox>
            </td>
            <td>
              <div class="goods">
                <img :src="item.picture" alt="" /><span>{{ item.name }}</span>
              </div>
            </td>
            <td width="220px">
              <div class="price">￥{{ item.price }}</div>
            </td>
            <td width="180px">
              <div class="count">
                <el-input-number v-model="item.count" :min="1" />
              </div>
            </td>
            <td width="180px">
              <div class="subtotal">￥{{ item.price * item.count }}</div>
            </td>
            <td width="140px">
              <div class="del" @click="cartStore.deleteCart(item.skuId)">删除</div>
            </td>
          </tr>
          <tr v-if="cartStore.cartList.length === 0">
            <td colspan="6">
              <div class="cart-none">
                <el-empty description="购物车列表为空">
                  <el-button type="primary">随便逛逛</el-button>
                </el-empty>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="pay">
      <p>
        共{{ cartStore.totalCount }}件商品，已选择{{ cartStore.selectedCount }}件，总计：<span
          >￥{{ cartStore.selectedPrice }}</span
        >
      </p>
      <el-button type="primary" size="large" @click="handlePay">下单结算</el-button>
    </div>
  </div>
</template>
<style scoped lang="scss">
.cart {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  background-color: #ffffff;
  thead {
    height: 50px;
    border-bottom: 1px solid #c2c2c2;
  }
  tbody {
    height: 100%;
    tr {
      height: 100px;
      border-bottom: 1px solid #c2c2c2;
      td {
        .el-checkbox {
          margin-left: 52px;
        }
      }
      .goods {
        width: 400px;
        display: flex;
        img {
          width: 80px;
          height: 80px;
          margin: 10px;
        }
        span {
          font-size: 16px;
          color: #333333;
          height: 100px;
          line-height: 100px;
        }
      }
      .price {
        text-align: center;
      }
      .subtotal {
        text-align: center;
        color: #a00000;
      }
      .del {
        text-align: center;
        color: rgb(56, 255, 99);
      }
    }
  }
}
.pay {
  width: 100%;
  height: 100px;
  margin-top: 20px;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  p {
    font-size: 16px;
    height: 100px;
    line-height: 100px;
    margin-left: 20px;
    color: #333333;
    width: 1000px;
    span {
      font-size: 18px;
      color: #a00000;
    }
  }
  .el-button {
    width: 100px;
    height: 50px;
    margin-right: 20px;
    color: #ffffff;
    border-radius: 25px;
    border: none;
    cursor: pointer;
  }
}
</style>
